<template>
    <div id="app">
        <div id="app-nav">
            <router-link to="/">
                <span>首页</span>
            </router-link>
            <router-link to="/chat">
                <span>聊天室</span>
                <span class="nick-name" v-if="my_name && my_name.length>0">{{ my_name }}</span>
            </router-link>
            <router-link to="/about">
                <span>关于</span>
            </router-link>
        </div>
        <div id="app-view">
            <!-- <keep-alive> -->
                <router-view />
            <!-- </keep-alive> -->
        </div>
    </div>
</template>


<style lang="scss">
@import "./assets/styles/app-base.scss";

$item-color: #2c3e50;
$item-active-color: #42b983;

#app {
    // font-family: "Avenir", Helvetica, Arial, sans-serif;
    // -webkit-font-smoothing: antialiased;
    // -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    background: #fafcff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    // border: {
    //     width: 0 2px;
    //     style: solid;
    //     color: #ffffff;
    // }

    max-width: 600px;
    width: 100vw;
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    #app-nav {
        flex-shrink: 0;
        flex-grow: 0;

        background-color: #ffffff;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

        display: flex;
        justify-content: center;
        align-items: stretch;

        > a {
            position: relative;
            flex-grow: 1;

            height: 60px;
            color: mix(#fff, $item-color, 70%);
            text-decoration: none;
            background-color: #f5f7fa;
            transition: 0.5s;

            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            > span {
                position: relative;
                z-index: 2;
            }

            .nick-name {
                color: hsl(0, 0, lightness($item-active-color));
                font-size: 0.8em;
            }

            &:after {
                content: "";
                position: absolute;
                height: 1px;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: mix(#fff, $item-color, 70%);
                transition: 0.5s;
                z-index: 1;
            }

            & + a {
            }

            &.router-link-exact-active {
                flex-grow: 1.2;
                color: $item-active-color;
                background-color: #fff;
                &:after {
                    height: 4px;
                    bottom: 0;
                    background-color: $item-active-color;
                }
            }
        }
    }
    #app-view {
        flex-shrink: 1;
        flex-grow: 1;
        position: relative;
    }
}
</style>


<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class App extends Vue {

    get my_name() {
        return this.$store.state.user_info.nick_name || "";
    }

    created() {
    }
}
</script>
